<template>
	<view class="filter-box">
		<view class="cu-modal" style="z-index: -1;" :class="{ show: showSel }" @tap="hideModal"></view>
		<view class="navbar">
			<view class="sel-box u-flex-col" v-show="showSel">
				<view class="sel-item" @tap="onSel(0)"
					:class="{ 'sel-active': defaultOrder === 0 && filterIndex === 0 }">綜合推薦</view>
				<view class="sel-item" @tap="onSel(1)"
					:class="{ 'sel-active': defaultOrder === 1 && filterIndex === 0 }">上架時間</view>
			</view>
			<view class="nav-item u-flex-col" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">
				<view class="title-box  u-flex u-col-center">
					<text class="filter-title">{{ defaultOrder === 1 ? '上架時間' : '綜合推薦' }}</text>
					<view class="p-box">
						<!-- 	<text style="font-size: 22rpx;" :class="{ active: filterIndex === 0 }"
							class="iconfont icon-xiala1 "></text> -->
						<u-icon v-if="!showSel" name="arrow-up" color="#645aed"></u-icon>
						<u-icon v-if="showSel" name="arrow-down" color="#645aed"></u-icon>
					</view>
				</view>
				<view class="line" :class="{ 'line-active': filterIndex === 0 }"></view>
			</view>
			<view class="nav-item u-flex-col" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">
				<view class="title-box u-flex" style="display: flex;align-items: center;">
					<text class="filter-title">銷量</text>
					<u-icon name="arrow-up-fill" v-if="salesOrder==2" color="#645aed"></u-icon>
					<u-icon name="arrow-down-fill" v-if="salesOrder==1" color="#645aed"></u-icon>
				</view>
				<view class="line" :class="{ 'line-active': filterIndex === 1 }"></view>
			</view>
			<view class="nav-item u-flex-col" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">
				<view class="title-box u-flex" style="display: flex;align-items: center;">
					<text class="filter-title">價格</text>
					<u-icon name="arrow-up-fill" v-if="priceOrder==2" color="#645aed"></u-icon>
					<u-icon name="arrow-down-fill" v-if="priceOrder==1" color="#645aed"></u-icon>
<!-- 					<view class="p-box u-flex-col u-m-l-6">
						<view class="u-iconfont uicon-arrow-up"
							:style="{ fontSize: '20rpx', lineHeight: '18rpx', color: priceOrder === 1 && filterIndex === 2 ? '#d5a65a' : '#333' }">
						</view>
						<view class="u-iconfont uicon-arrow-down"
							:style="{ fontSize: '20rpx', lineHeight: '18rpx', color: priceOrder === 2 && filterIndex === 2 ? '#d5a65a' : '#333' }">
						</view>
					</view> -->
				</view>
				<view class="line" :class="{ 'line-active': filterIndex === 2 }"></view>
			</view>
			<view class="nav-item u-flex-col" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
				<!-- <view class="title-box"><text class="filter-title">筛选</text></view> -->
				<view class="title-box u-flex">
					<text class="filter-title">篩選</text>
					<view class="p-box u-flex-col u-m-l-6">
						<text class="iconfont icon-shaixuan"></text>
					</view>
				</view>
				<view class="line" :class="{ 'line-active': filterIndex === 3 }"></view>
			</view>
		</view>
		<view class="bg" v-if="showSel||showdownStatus2" @click="closeWindows"></view>
		<u-popup :show="show" mode="right" @close="closeWindows" @open="open">
			<scroll-view class="dialog" :scroll-y="true" style="height:100vh">
				<view>
					<view class="title">分類</view>
					<view class="cbox">
						<view class="citem" :class="{'active':activeindex1===''}" @click="getAll">全部</view>
						<view class="citem" :class="{'active':activeindex1===item.id}" v-for="(item,index) in catelist
						" :key="index" @click="cateclick(item.id)">
							{{item.cat_name}}
						</view>
					</view>
				</view>
				<view>
					<view class="title">品牌</view>
					<view class="cbox">
						<view class="citem" :class="{'active':activeindex2===''}" @click="activeindex2=''">全部</view>
						<view class="citem" :class="{'active':activeindex2===item.brand_id}" v-for="(item,index) in brandlist
						" :key="index" @click="brandclick(item.brand_id)">
							{{item.brand_name}}
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="btn1" @click="reset">
						重置
					</view>
					<view class="btn2" @click="submit">
            確定
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>
<script>
import  {getchildbrand} from '@/network/api/cart.js'
	/**
	 * 商品筛选组件
	 *
	 */
	export default {
		components: {},
		props: {
			cateid: {
        type: Number,
        default: 0
      },
			brandlist: Array,
			catelist: Array,
		},
		data() {
			return {
				activeindex1: "",
				activeindex2: "",
				show: false,
				showdownStatus2: false,
				downMenu: [],
				filterIndex: 0,
				showSel: false, //综合选择
				defaultOrder: 0, //综合
				priceOrder: 0, //价格
				salesOrder: 0, //销量
				newProdcutOrder: 0 //筛选
			};
		},
		computed: {
			filterData() {
				const data = {
					defaultOrder: this.defaultOrder,
					priceOrder: this.priceOrder,
					salesOrder: this.salesOrder,
					newProdcutOrder: this.newProdcutOrder,
					brand_id: this.activeindex2,
					cate_id: this.activeindex1 || this.cateid * 1

				};
				return data;
			}
		},
		onLoad() {},
		methods: {
      async getAll() {
        this.activeindex1 = ''
        console.log('kkk',this.cateid)
        const res = await getchildbrand(this.cateid)
        console.log(res)
        this.brandlist = res.data.brand;
        this.$emit('brand', this.brandlist );
      },
			async cateclick(index) {
        this.activeindex1 = index
        console.log(this.activeindex1);
        const res = await getchildbrand(this.activeindex1)
        console.log(res)
        this.brandlist = res.data.brand;
        this.$emit('brand', this.brandlist);
      },
			brandclick(index) {
				this.activeindex2 = index
			},
			//选择
			bindChenck(item, id) {
				item[id].checked = !item[id].checked
				this.downMenu = item;
			},
			//点击实现多选
			chooseOne(id) {
				//具体那条数据
				this.bindChenck(this.seriesDate[this.downSearch].children, id)

			},
			//关闭弹窗
			closeWindows() {
				this.show = false
			},
			open() {

			},
			reset() {
				console.log(this.cateid);
				this.activeindex1 = this.cateid * 1;
				this.activeindex2 = "";
				this.show = false
				this.$emit('change', this.filterData);
			},
			submit() {
				this.show = false
				this.$emit('change', this.filterData);
			},
			//筛选
			tabClick(index) {
				this.filterIndex = index;
				index === 0 ? (this.showSel = !this.showSel) : (this.showSel = false);
				// index === 1 ? (this.salesOrder = 1) : (this.salesOrder = 0);
				index === 1 ? (this.salesOrder = this.salesOrder === 1 ? 2 : 1) : (this.salesOrder = 0)
				index === 2 ? (this.priceOrder = this.priceOrder === 1 ? 2 : 1) : (this.priceOrder = 0);
				// index === 3 ? (this.newProdcutOrder = 1) : (this.newProdcutOrder = 0);
				index === 3 ? (this.show = true) : (this.show = false)
				this.$emit('change', this.filterData);
			},
			onSel(dot) {
				this.defaultOrder = dot;
				this.$emit('change', this.filterData);
				this.showSel = false;
			},
			hideModal() {
				this.showSel = false;
			}
		}
	};
</script>

<style lang="scss">
	@import "../../../../static/iconfont/iconfont.css";

	.tagSelection1 {
		position: absolute;
		z-index: 5;
	}

	.dialog {
		width: 640rpx;

		.title {
			margin: 0 31rpx;
			margin-top: 31rpx;
			margin-bottom: 31rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}

		.cbox {
			margin: 0 31rpx;
			display: flex;
			justify-content: start;
			flex-wrap: wrap;


			.citem {
				margin-bottom: 32rpx;
				text-align: center;
				align-items: center;
				margin-right: 20rpx;
				padding: 0 35rpx;
				height: 54rpx;
				line-height: 54rpx;
				background: #F5F6F9;
				border-radius: 16rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				border: 1px solid #F5F6F9;
			}

			.active {
				border: 1px solid #645AED;
				background: #E5E7FA;
				color: #645AED;
			}
		}

		.btn {
			display: flex;
			justify-content: space-between;
			padding: 32rpx;

			.btn1 {
				width: 280rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				border: 1px solid #CBCBCB;
				opacity: 1;
				border-radius: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3A3A3A;
			}

			.btn2 {
				width: 280rpx;
				height: 68rpx;
				text-align: center;
				background: #645AED;
				line-height: 68rpx;
				border: 1px solid #CBCBCB;
				opacity: 1;
				border-radius: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.bg {
		z-index: 2;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .5);
	}

	.sel-box {
		position: absolute;
		width: 100vw;
		height: 140rpx;
		background: rgba(246, 246, 246, 1);
		border-radius: 0px 0px 20rpx 20rpx;
		z-index: 999;
		left: 50%;
		transform: translateX(-50%);
		bottom: -138rpx;
		transition: all ease-out 0.2s;

		.sel-item {
			color: #333;
			padding: 20rpx 40rpx 0;
			font-size: 24rpx;
			font-weight: 500;
		}

		.sel-active {
			color: #645AED;
			font-size: 26rpx;
			font-weight: 600;
		}
	}

	.spin {
		display: block;
		transform: rotate(180deg);
		font-size: 36rpx;
	}

	.filter-box {
		width: 100vw;
	}

	.navbar {
		display: flex;
		width: 100%;
		height: 95rpx;
		background: #fff;
		position: relative;
		z-index: 999;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			position: relative;

			.filter-title {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}

			.line {
				width: 110rpx;
				height: 5rpx;
				background: transparent;
				position: absolute;
				bottom: 0;
				z-index: 2;
			}

			.line-active {
				background: #645AED;
			}

			.p-box {
				// display: flex;

				// flex-direction: column;
				display: inline-block;

			}
		}
	}

	.current {
		color: #645AED;
	}
</style>
